<template>
	<view>
		<u-navbar title="" :autoBack="true" leftIconSize="32" height="44px" placeholder>
			<u-icon name="chat" size="38" slot="right"></u-icon>
		</u-navbar>
		<view class="com-item">
			<view class="com-item-top">
				<image class="com-image" :src="recipe.photo_path" mode="widthFix"></image>
				<view class="com-dish">
					<u-icon name="photo" color="#ffffff"></u-icon>
					{{recipe.dish_count}}
				</view>
			</view>
			<view class="com-title">
				{{recipe.title}}
			</view>
			<view class="com-info">
				<text class="" v-show="recipe.views_count_text
">
					浏览{{recipe.views_count_text}} ·
				</text>
				<text class="" v-show="recipe.favo_counts_text
">
					收藏{{recipe.favo_counts_text}}
				</text>
				<text class="" v-show="recipe.dish_count_text">
					· 学做{{recipe.dish_count_text}}
				</text>
			</view>
			<view class="item-author">
				<image class="author-avatar" :src="recipe.user.user_photo" mode="widthFix"></image>
				<view class="author-info">
					<view class="author-text">
						<view class="author-name">
							{{recipe.user.nickname}}
						</view>
						<view class="author-lvl">
							lv.{{recipe.user.lvl}}
						</view>
					</view>
				</view>
				<view class="follow-btn">
					关注
				</view>
			</view>
			<view class="com-story">
				<text>{{recipe.cookstory}}</text>
			</view>
			<view class="com-major">
				<text class="com-major-left">食材清单</text>
				<text class="com-major-right">加入采购清单</text>
			</view>
			<view class="com-major-item" v-for="(m, i) in recipe.major" :key="i">
				<text>{{m.title}}</text>
				<text>{{m.note}}</text>
			</view>
			<view class="com-step">
				<text>烹饪步骤</text>
				<view class="com-step-item" v-for="(s, i) in recipe.cookstep" :key="i + 1000">
					<text v-show="i >= 0 && i <= recipe.cookstep.length - 2">步骤{{i + 1}}/{{recipe.cookstep.length}}</text>
					<text v-show="i == recipe.cookstep.length - 1">最后一步</text>
					<image :src="s.image" mode="widthFix"></image>
					{{s.content}}
				</view>
			</view>
			<view class="com-time">
				发布于{{recipe.create_time}}
			</view>
			<view class="com-tips" v-if="recipe.tips">
				<text>小贴士</text>
				<view class="com-tips-item">
					{{recipe.tips}}
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		http
	} from '../../untils/http';
	export default {
		data() {
			return {
				// index: 0
				recipe: []
			}
		},
		onLoad({
			id
		}) {
			// console.log(id);
			this.getCommondityDetail(id)
		},
		methods: {
			getCommondityDetail(id) {
				console.log(id);

				const url = '/recipe/detail/' + id

				http(url).then(res => {
					// console.log(res.result.recipe);
					this.recipe = res.result.recipe
					console.log(this.recipe);
				})
			}
		}
	}
</script>

<style lang="scss">
	.com-item {
		box-sizing: border-box;
		width: 750rpx;
	}

	.com-item-top {
		position: relative;
		width: 750rpx;

		.com-image {
			width: 100%;
		}

		.com-dish {
			position: absolute;
			right: 10px;
			// top: 10px;
			bottom: 12px;
			padding: 1px 3px 1px 1px;
			display: flex;
			font-size: 12px;
			color: #ffffff;
			background-color: rgba(7, 17, 27, .3);
			border-radius: 2px;
		}
	}

	.com-title {
		margin-top: 8px;
		margin-left: 10px;
		margin-bottom: 5px;
		font-size: 18px;
		font-weight: 700;
	}

	.com-info {
		margin-left: 10px;
		font-size: 10px;
		color: #949494;
	}

	.item-author {
		margin-top: 5px;
		margin-left: 5px;
		position: relative;
		display: flex;
		align-items: center;
		padding: 4px;
		max-width: 750rpx;
		box-sizing: border-box;

		.author-avatar {
			// margin-top: 10px;
			// margin-left: 5px;
			display: block;
			width: 32px;
			height: 32px;
			border-radius: 999px;
		}
	}

	.author-info {
		display: flex;
		flex-direction: column;

		.author-text {
			display: flex;
			align-items: center;
			margin-left: 2px;

			.author-name {
				margin-left: 4px;
				font-size: 12px;
				font-weight: 700;
			}

			.author-lvl {
				// margin-left: 1px;
				font-style: italic;
				font-weight: 700;
				font-size: 18px;
				transform: scale(.5);
				color: #fc0;
			}
		}
	}

	.follow-btn {
		position: absolute;
		right: 10px;
		width: 50px;
		height: 20px;
		text-align: center;
		line-height: 20px;
		font-size: 10px;
		font-weight: 700;
		background-color: #ffc535;
		border-radius: 999px;
	}

	.com-story {
		padding: 8px 8px;
		font-size: 14px;
	}

	.com-major {
		margin-top: 8px;
		padding: 0 8px;
		display: flex;
		align-items: center;
		justify-content: space-between;
		height: 70rpx;

		.com-major-left {
			font-size: 14px;
			font-weight: 700;
		}

		.com-major-right {
			font-size: 12px;
		}
	}

	.com-major-item {
		padding: 0 8px;
		display: flex;
		align-items: center;
		justify-content: space-between;
		height: 70rpx;
		font-size: 14px;
	}

	.com-step {
		box-sizing: border-box;
		margin-top: 8px;
		margin-left: 10px;

		text {
			font-size: 14px;
			font-weight: 700;
		}

		.com-step-item {
			box-sizing: border-box;
			padding: 10px;
			margin-top: 8px;
			width: 100%;
			font-size: 14px;

			image {
				display: block;
				width: 675rpx;
				margin-top: 10px;
				margin-bottom: 5px;
				border-radius: 15px;
			}
		}
	}

	.com-time {
		margin-left: 10px;
		margin-top: 20px;
		margin-bottom: 10px;
		font-size: 12px;
		color: #949494;
	}

	.com-tips {
		margin-top: 10px;
		margin-left: 10px;

		text {
			font-size: 14px;
			font-weight: 700;
		}
		
		.com-tips-item {
			margin-top: 10px;
		}
	}
</style>